<template>
    <div>
        <el-tabs v-model="activeName" @tab-click="switchTabPane">
            <el-tab-pane :label="$t('creditRecognitionSwitch.switchPermissionSetting')" name="left"></el-tab-pane>
            <el-tab-pane :label="$t('creditRecognitionSwitch.shortTermExchange')" name="right"></el-tab-pane>
        </el-tabs>
        <template v-if="activeName == 'left'">
            <el-card>
                <h1 slot="header">{{$t('creditRecognitionSwitch.openingAuthority')}}</h1>
                <el-form
                    ref="settingForm"
                    :rules="settingFormRule"
                    :model="settingForm"
                    label-position="right"
                    label-width="90px"
                    label-suffix="："
                >
                    <el-row>
                        <el-col :span="8">
                            <el-form-item :label="$t('creditRecognitionSwitch.openingTime')" prop="startTime">
                                <el-date-picker
                                    type="datetime"
                                    :placeholder="$t('creditRecognitionSwitch.pleaseSelect')"
                                    style="100%"
                                    format="yyyy-MM-dd HH:mm"
                                    value-format="yyyy-MM-dd HH:mm"
                                    v-model="settingForm.startTime"
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item :label="$t('creditRecognitionSwitch.endTime')"  prop="endTime">
                                <el-date-picker
                                    type="datetime"
                                    :placeholder="$t('creditRecognitionSwitch.pleaseSelect')"
                                    style="100%"
                                    :picker-options="pickerOptions"
                                    :default-value="settingForm.startTime"
                                    format="yyyy-MM-dd HH:mm"
                                    value-format="yyyy-MM-dd HH:mm"
                                    v-model="settingForm.endTime"
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item :label="$t('creditRecognitionSwitch.enable')"  prop="isEnable">
                        <el-switch
                            v-model="settingForm.isEnable"
                            :active-value="0"
                            :inactive-value="1"
                            active-color="#3e82e5"
                            inactive-color="#e5e5e5"
                        ></el-switch>
                    </el-form-item>
                    <el-form-item :label="$t('creditRecognitionSwitch.remark')"  prop="remark">
                        <el-input
                            :rows="4"
                            style="width:60%"
                            type="textarea"
                            maxlength="500"
                            :placeholder="$t('creditRecognitionSwitch.pleaseEnterContent')"
                            v-model="settingForm.remark"
                        ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="handleClick('RESET')">
                            {{ $t('creditRecognitionSwitch.reset') }}
                        </el-button>
                        <el-button type="primary" @click="handleClick('SAVE')">
                            {{ $t('creditRecognitionSwitch.save') }}
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </template>
        <template v-else>
            <ConditionCard
                body-style="padding: 24px"
                class="groupList-addUser"
                @search="queryTableList"
                @reset="reset"
            >
                <el-form
                    ref="queryForm"
                    :model="queryForm.condition"
                    label-width="80px"
                    label-suffix="："
                >
                    <el-row :gutter="2">
                        <el-col :span="8">
                            <el-form-item :label="$t('creditRecognitionSwitch.grade')">
                                <GradeSelect v-model="queryForm.condition.grade"></GradeSelect>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item :label="$t('creditRecognitionSwitch.studentNumber')">
                                <el-input
                                    v-model="queryForm.condition.studentId"
                                    clearable
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item :label="$t('creditRecognitionSwitch.fullName')">
                                <el-input
                                    v-model="queryForm.condition.studentName"
                                    clearable
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item :label="$t('creditRecognitionSwitch.college')">
                                <DictSelect
                                    labelAll="请选择"
                                    v-model="queryForm.condition.faculty"
                                    @change="handleChangeFaculty"
                                    :data="options.facultyList"
                                ></DictSelect>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item :label="$t('creditRecognitionSwitch.major')">
                                <DictSelect
                                    labelAll="请选择"
                                    v-model="queryForm.condition.major"
                                    :data="options.profession"
                                ></DictSelect>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </ConditionCard>
            <el-card>
                <el-row
                    slot="header"
                    type="flex"
                    justify="space-between"
                    align="center"
                    style="margin-bottom:16px"
                >
                    <el-col :span="6">
                        <h1>{{$t('creditRecognitionSwitch.shortTermExchangeStudentList')}}</h1>
                    </el-col>
                    <el-col :span="6" style="text-align:right">
                        <el-button type="danger" @click="handleClick('DEL')">{{$t('creditRecognitionSwitch.delete')}}</el-button>
                        <el-button type="primary" @click="handleClick('ADD')">{{$t('creditRecognitionSwitch.addTo')}}</el-button>
                    </el-col>
                </el-row>
                <edu-table
                    :data="tableList"
                    style="width: 100%"
                    ref="shortExchangeStuTable"
                    :total="queryForm.total_"
                    :pageSize="queryForm.pageSize_"
                    @page-change="onCurrentPageChange"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column :label="$t('creditRecognitionSwitch.studentNumber')" prop="studentId"></el-table-column>
                    <el-table-column :label="$t('creditRecognitionSwitch.fullName')" prop="studentName"></el-table-column>
                    <el-table-column :label="$t('creditRecognitionSwitch.grade')" prop="grade"></el-table-column>
                    <el-table-column :label="$t('creditRecognitionSwitch.college')" prop="facultyI18n"></el-table-column>
                    <el-table-column :label="$t('creditRecognitionSwitch.major')" prop="professionI18n"></el-table-column>
                </edu-table>
            </el-card>
            <el-dialog
                width="35%"
                :title="$t('creditRecognitionSwitch.addStudents')"
                @open="dialogOpen"
                @close="dialogClose"
                :visible.sync="dialog.visiable"
            >
                <el-form
                    label-suffix="："
                    :model="dialog"
                    label-position="right"
                    ref="dialog"
                    label-width="100px"
                    @submit.native.prevent
                >
                    <el-form-item
                        :label="$t('creditRecognitionSwitch.studentNumber')"
                        prop="studentId"
                        :rules="[{ required: true, message: this.$t('creditRecognitionSwitch.pleaseSearchTeacherId'), trigger: 'blur' }]"
                    >
                        <KeywordInput
                            v-model="dialog.studentId"
                            :placeholder="$t('creditRecognitionSwitch.pleaseSearchTeacherId')"
                            @enter="queryStudent"
                        />
                    </el-form-item>
                    <el-form-item :label="$t('creditRecognitionSwitch.fullName')" prop="studentName">
                        <el-input
                            disabled
                            v-model="dialog.studentName"
                            style="width:250px"
                        ></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('creditRecognitionSwitch.grade')" prop="grade">
                        <el-input disabled v-model="dialog.grade" style="width:250px"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('creditRecognitionSwitch.college')" prop="facultyI18n">
                        <el-input
                            disabled
                            v-model="dialog.facultyI18n"
                            style="width:250px"
                        ></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('creditRecognitionSwitch.major')" prop="professionI18n">
                        <el-input
                            disabled
                            v-model="dialog.professionI18n"
                            style="width:250px"
                        ></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer">
                    <el-button @click="handleClickDlg('REST')">{{$t('creditRecognitionSwitch.reset')}}</el-button>
                    <el-button type="primary" @click="handleClickDlg('SAVE')">{{$t('creditRecognitionSwitch.submit')}}</el-button>
                </span>
            </el-dialog>
        </template>
    </div>
</template>
<script>
import UTILS from 'common/src/utils/utils'
import { queryDic } from 'common/src/api/dictionary'
import { queryStuInfo } from 'common/src/api/internationalExchanges/exchangeApproval'
import {
    getSetting,
    saveSetting,
    getTableList,
    addExchangeStudent,
    deleteExchangeNameList
} from 'common/src/api/internationalExchanges/creditAuthorizationSwitch'
export default {
    data() {
        return {
            activeName: 'left',
            //左侧标签数据
            settingForm: {},
            settingFormRule: {
                calendarId: [{ required: true, message: this.$t('creditRecognitionSwitch.pleaseSearchSemester'), trigger: 'change' }],
                startTime: [{ required: true, message: this.$t('creditRecognitionSwitch.pleaseSelectStartTime'), trigger: 'change' }],
                endTime: [{ required: true, message: this.$t('creditRecognitionSwitch.pleaseSelectEndTime'), trigger: 'change' }],
                isEnable: [{ required: true }],
                remark: [{ required: false }]
            },
            pickerOptions: {
                disabledDate: time => {
                    return this.isEarlyThan(time)
                }
            },
            //右侧标签数据
            queryForm: {
                total_: 0,
                pageNum_: 1,
                pageSize_: 20,
                condition: {
                    grade: '',
                    studentId: '',
                    studentName: '',
                    faculty: '',
                    major: ''
                }
            },
            dialog: {
                visiable: false,
                studentId: '',
                studentName: '',
                grade: '',
                facultyI18n: '',
                professionI18n: ''
            },
            tableList: [],
            multipleSelection: [],
            options: {
                status: [
                    {
                        valve: 0,
                        label: '草稿'
                    },
                    {
                        value: 1,
                        label: '已提交'
                    },
                    {
                        value: 2,
                        label: '已驳回'
                    },
                    {
                        value: 3,
                        label: '已通过'
                    },
                    {
                        value: 4,
                        label: '审核中'
                    }
                ],
                facultyList: [],
                profession: []
            }
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        async init() {
            await this.queryData()
            await this.requestSetting()
        },
        switchTabPane(tab, event) {
            if (this.activeName == 'right') this.queryTableList()
        },
        queryData() {
            //筛选条件字典查询
            let data = {
                lang: this.$store.getters.language || 'cn',
                type: 'allChild',
                keys: ['X_YX']
            }
            queryDic(data).then(res => {
                if (res.code == 200) {
                    UTILS.fillSelect(
                        {
                            facultyList: 'X_YX'
                        },
                        res.data,
                        this.options
                    )
                }
            })
        },
        // 根据学院获取专业
        handleChangeFaculty(val) {
            this.options.profession = []
            const data = {
                lang: this.$store.getters.language || 'cn',
                type: 'allChild',
                keys: ['G_ZY'],
                filter: {
                    prefix: this.queryForm.condition.faculty,
                    specilaCode: 'XY2ZY',
                    facultys: this.queryForm.condition.faculty
                }
            }
            queryDic(data).then(res => {
                if (res.code === 200)
                    UTILS.fillSelect(
                        {
                            profession: 'G_ZY'
                        },
                        res.data,
                        this.options
                    )
            })
        },
        async queryTableList(params = this.queryForm) {
            let { code, data } = await getTableList(params)
            if (code !== 200) return
            this.tableList = data.list
            this.queryForm.total_ = data.total_
            this.queryForm.pageNum_ = data.pageNum_
            this.queryForm.pageSize_ = data.pageSize_
        },
        isEarlyThan(time) {
            return time.getTime() < new Date(this.settingForm.startTime).getTime()
        },
        handleClick(mode) {
            switch (mode) {
                case 'SAVE':
                    this.$refs['settingForm'].validate(valid => {
                        if (valid) {
                            saveSetting(this.settingForm).then(res => {
                                if (res.code == 200) {
                                    this.$message({
                                        type: 'success',
                                        message: '保存成功'
                                    })
                                    this.requestSetting()
                                }
                            })
                        } else {
                            return false
                        }
                    })
                    break
                case 'RESET':
                    this.$refs['settingForm'].resetFields()
                    break
                case 'ADD':
                    this.dialog.visiable = !this.dialog.visiable
                    break
                case 'DEL':
                    if (this.multipleSelection.length === 0) {
                        this.$message({
                            type: 'warning',
                            message: '请先勾选需要删除的列表数据'
                        })
                        return
                    }
                    this.$confirm('确认删除, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    })
                        .then(() => {
                            deleteExchangeNameList({ ids: this.multipleSelection }).then(res => {
                                if (res.code == 200) {
                                    this.$message({
                                        type: 'success',
                                        message: '删除成功!'
                                    })
                                    this.queryTableList()
                                }
                            })
                        })
                        .catch(() => {
                            this.$refs['shortExchangeStuTable'] &&
                                this.$refs['shortExchangeStuTable'].clearSelection()
                        })
                    break
            }
        },
        async queryStudent(studentId) {
            let { code, data, msg } = await queryStuInfo({
                studentId: studentId,
                isIllegal: true,
                isStatus: true,
                isUndergraduate: true
            })
            if (code !== 200) return
            if (!data) this.$eduAlert(msg)
            for (let key in this.dialog) {
                if (key !== 'visiable') {
                    this.dialog[key] = data ? data[key] : ''
                }
            }
        },
        handleClickDlg(mode) {
            switch (mode) {
                case 'SAVE':
                    this.$refs['dialog'].validate(valid => {
                        if (valid) {
                            let params = _.cloneDeep(this.dialog)
                            delete params.visiable
                            addExchangeStudent(params).then(res => {
                                if (res.code == 200) {
                                    this.$message({
                                        type: 'success',
                                        message: '添加成功'
                                    })
                                    this.dialog.visiable = !this.dialog.visiable
                                    this.queryTableList()
                                }
                            })
                        } else {
                            return false
                        }
                    })
                    break
                case 'REST':
                    this.$refs['dialog'].resetFields()
                    break
            }
        },
        onCurrentPageChange(pager) {
            this.queryForm.pageSize_ = pager.pageSize
            this.queryForm.pageNum_ = pager.pageNum
            this.queryTableList()
        },
        handleSelectionChange(val) {
            this.multipleSelection = val.map(item => item.id)
        },
        dialogClose() {
            this.$refs['dialog'] && this.$refs['dialog'].resetFields()
        },
        dialogOpen() {
            this.$refs['dialog'] && this.$refs['dialog'].clearValidate()
        },
        reset() {
            this.queryForm.total_ = 0
            this.queryForm.pageNum_ = 1
            this.queryForm.pageSize_ = 20
            for (let key in this.queryForm.condition) {
                this.queryForm.condition[key] = ''
            }
            this.queryTableList()
        },
        async requestSetting() {
            let { code, data } = await getSetting()
            if (code !== 200) return
            this.settingForm = data
        }
    }
}
</script>
<style scoped>
.toLine {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.line {
    width: 100%;
    height: 0px;
    border: 2px solid #e4e4e4;
    margin: 32px 0;
}
</style>
